<template>
	<view class="container">
		<view class="head">
			<view class="head_text">5G发展</view>
			<image src="../../../static/public/img/my.png"
				style="width: 25px;height: 25px;position: absolute;top:30px;left: 15px;" @click="goassets"></image>
		</view>

		<!-- 商品轮播图 -->
		<view class="banner">
			
			<swiper class="swiper" :current="current" autoplay="true" indicator-dots="true" indicator-color="#e9e9e9"
				indicator-active-color="#fff" circular="true" style="height: 180px;">
				
				<swiper-item v-for="(item,index) in bannerList" :key="index" class="swiper-item">
					<img class="img" :src="item">
				</swiper-item>
			</swiper>
		</view>

		<view class="notice">
			<!-- <a href="#/notice" class=""> -->
				<image src="../../../static/public/img/laba.png"
					style="width: 20px;height: 20px;position: absolute;top: 8px;left: 15px;z-index: 9999;"></image>
				<marquee direction="left" scrollamount="5" class="marquee" v-for="(item,index) in notice">
				
				<view class="" @click="abount(item.id)">
					{{item.title}}
				</view>
				
				</marquee>
			<!-- </a> -->
		</view>

		<view  class="vux-flexbox menus vux-flex-row">
			<view  class="vux-flexbox-item" style="margin-left: 8px;" @click="gopay">
					<image src="../../../static/public/img/ck.png" ></image>
					<text>我要存款</text>
				</view>
			<view  class="vux-flexbox-item" style="margin-left: 8px;" @click="gonotice">
				
					<image src="../../../static/public/img/gg.png"></image>
					<text>消息公告</text>
				</view>
			<view  class="vux-flexbox-item" style="margin-left: 8px;">
			       <image src="../../../static/public/img/kf.png" ></image>
					<text>客服中心</text>
				</view>
		</view>
		
		<view style="margin-top: 2%;" @click="gogameCenter(1)">
			<view style="position: absolute;color: white;z-index: 997;font-weight: 600;font-size: 24px;margin-top: 13px;margin-left: 40px;">5G概念</view>
			<image src="../../../static/public/img/index1.24aa839.jpg" style="width: 100%;height: 100px;"></image>
			<button style="width: 23%;font-size: 13px;border-radius: 20px;background-image: linear-gradient(107deg,#fad961,#f76b1c);color: white;height: 25px;line-height: 25px;position: absolute;margin-left: 285px;
    margin-top: -50px;">立即购买</button>
		</view>
		
		<view style="margin-top: 2%;" @click="gogameCenter(2)">
			<view style="position: absolute;color: white;z-index: 997;font-weight: 600;font-size: 24px;margin-top: 13px;margin-left: 40px;">5G通信</view>
			<image src="../../../static/public/img/index2.d5fa4e8.png" style="width: 100%;height: 100px;"></image>
			<button style="width: 23%;font-size: 13px;border-radius: 20px;background-image: linear-gradient(107deg,#fad961,#f76b1c);color: white;height: 25px;line-height: 25px;position: absolute;margin-left: 285px;
    margin-top: -50px;">立即购买</button>
		</view>
		
		<view style="margin-top: 2%;" @click="gogameCenter(3)">
			<view style="position: absolute;color: white;z-index: 997;font-weight: 600;font-size: 24px;margin-top: 13px;margin-left: 40px;">无线电概念</view>
			<image src="../../../static/public/img/index3.4d1ec71.jpg" style="width: 100%;height: 100px;"></image>
			<button style="width: 23%;font-size: 13px;border-radius: 20px;background-image: linear-gradient(107deg,#fad961,#f76b1c);color: white;height: 25px;line-height: 25px;position: absolute;margin-left: 285px;
    margin-top: -50px;">立即购买</button>
		</view>
		
		<view style="margin-top: 2%;" @click="goabout">
			<image src="../../../static/public/img/about.aed2440.jpg" style="width: 100%;height: 100px;"></image>
		</view>
		
	


	</view>
</template>

<script>
	export default {

		data() {
			return {
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				current: 0,
				bannerList: [
					'../../../static/public/img/20221130200326.jpg'
				], // banner图
				notice:[]
			}
		},
		methods: {
           gogameCenter(id){
			   if(id == 1){
				   uni.navigateTo({
				   	 url:'/pages/components/gameCenter/gameCenter'
				   })
			   }else if(id == 2){
				   uni.navigateTo({
				   	 url:'/pages/components/gameCenter/gameCentertow'
				   })
			   }else if(id === 3){
				   uni.navigateTo({
				   	 url:'/pages/components/gameCenter/gameCenterfire'
				   })
			   }

		   },
		   goassets(){
			   uni.navigateTo({
			   	url:'/pages/components/assets/assets'
			   })
		   },
		   gopay(){
			   uni.navigateTo({
			   	url:'/pages/components/pay/pay'
			   })
		   },
		   goabout(){
			   uni.navigateTo({
			   	url:'/pages/components/about/about'
			   })
		   },
		   gonotice(){
			   uni.navigateTo({
			   	url:'/pages/components/notice/notice'
			   })
		   },
		   index(){
			   this.$api.request('/api/index/index').then(res=>{
				   // this.bannerList = res.data.banner
				   this.notice = res.data.notice
			   });
		   },
		   abount(id){
			   uni.navigateTo({
			   	url:'/pages/components/about/abouts?id=' + id
			   })
		   }
		},
		onLoad() {
			this.index()
			uni.showTabBar()
		},
		onShow() {
uni.showTabBar()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #1a1a1c;
	}
	.container {
		background: #1a1a1c;
		.head {
			background: #151516 !important;
			color: #fff;
			height: 130rpx;
			font-size: 18px;
		}

		.head_text {
			text-align: center;
			line-height: 160rpx;
		}

		// 商品轮播图
		.banner {
			margin-top: -1px;

			.swiper {
				height: 200rpx;

				.swiper-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.notice {
			position: relative;
			height: 38px;
			line-height: 38px;
			white-space: nowrap;
			overflow: hidden;
			-webkit-tap-highlight-color: transparent;
			-webkit-transform-style: preserve-3d;
		 transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;
		 backface-visibility: hidden;
			border-radius: 15px 15px 0 0;
			margin-top: -0.33333rem;
			background-image: -webkit-linear-gradient(top, #e6b87a, #d49a53 80%, #e6b87a);
			background-image: linear-gradient(180deg, #e6b87a, #d49a53 80%, #e6b87a);
			top: -10px;
		}
		marquee {
			color: black;
			font-size: 14px;
			position: absolute;
			left: 0.8rem;
			top: 0;
			right: 0;
			white-space: nowrap;
			overflow: hidden;
			left: 37px;
		}
		.menus{
		    padding: 0.333333rem 0 0.4rem;
		    height: 80px;
		    text-align: center;
		}
		.vux-flex-row {
		    box-direction: row;
		    box-orient: horizontal;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -webkit-flex-direction: row;
		    flex-direction: row;
		}
		.vux-flexbox {
		    width: 100%;
		    display: -webkit-box;
		    display: flex;
		    display: -webkit-flex;
		    box-align: center;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		}
		.vux-flexbox .vux-flexbox-item {
		    -webkit-box-flex: 1;
		    flex: 1;
		    -webkit-flex: 1;
		    min-width: 20px;
		    width: 0;
		}
		.vux-flexbox .vux-flexbox-item:first-child {
		    margin-left: 0!important;
		    margin-top: 0!important;
		}
		 .menus uni-image{
		    width: 34px;
		    height: 34px;
			display: block;
			overflow: hidden;
			position: relative;
			left: 46px;
		}
		.menus text{
		    color: #717378;
			font-size: 13px;
		}

		a{
			text-decoration:none;
		}



	}
</style>
